<template>
    <div class="goods-info-wrapper" :class="{'disabled': invalid}">
        <div class="goods-info">
            <div class="goods-wrapper">
                <div class="goods-thumbnail" :class="{'svip-border':hasSvip}">
                   <div class="svip" v-if="hasSvip"><span class="svip-tag-text ">超级会员</span></div>
                    <slot name="image">
                        <xe-image
                            v-if="goodsInfo.img_url"
                            :src="handleCompressImg(goodsInfo.img_url)"
                            fit="blur"
                            radiusData="0.08rem"
                        />
                    </slot>
                    <van-tag
                        type="primary"
                        class="goods-type ET tag"
                        color="rgba(51, 51, 51, 0.6)"
                        v-if="goodsInfo.goods_tag_is_show"
                        >{{ goodsInfo.goods_tag }}</van-tag
                    >
                </div>
                <div class="goods-detail">
                    <div class="goods-header">
                        <div class="goods-titles">
                            <van-tag
                                type="primary"
                                plain
                                class="goods-tag ET tag"
                                color="#1472FF"
                                v-if="goodsTitleTag"
                                >{{goodsTitleTag}}</van-tag
                            >
                            <span class="goods-title">{{ goodsInfo.goods_name }}</span>
                        </div>
                        <slot name="specification" v-if="specification">
                            <div class="goods-specification goods-specification-selectable" v-if="skuSelectable" @click.stop="showSkuSelector">
                                <span class="specifications">{{ specification }}</span>
                                <i class="iconfont icon-zhixiang"></i>
                            </div>
                            <div class="goods-specification" v-else>
                                {{ specification }}
                            </div>
                        </slot>
                    </div>
                    <div class="goods-tags" v-if="goodsTagList.length">
                        <span class="goods-tag" v-for="goodsTag in goodsTagList" :key="goodsTag">
                            {{goodsTag}}
                        </span>
                    </div>
                    <div class="invalid-area" v-if="invalid">
                        {{invalidReason}}
                    </div>
                    <div class="disabled-area" v-else-if="!invalid && invalidReason && !goodsTips">
                        <div class="disabled-tips">{{invalidReason}}</div>
                        <div class="reselect-button" v-if="reSelectSKU" @click.stop="showSkuSelector">重选</div>
                    </div>
                    <div class="goods-quantity" v-else>
                        <div class="goods-pay-info">
                            <div class="goods-limit" v-if="showStepper">
                                <span class="border-blue" v-if="goodsInfo.sku_info && goodsInfo.sku_info.sku_min_purchase > 1">{{ goodsInfo.sku_info.sku_min_purchase }}件起售</span>
                                <span class="border-orange" v-if="goodsInfo.limit_purchase">限购{{ goodsInfo.limit_purchase }}件</span>
                            </div>
                            <div class="goods-price">
                                <slot name="price">
                                    <price :amount="ratePrice" intSize=".36rem"></price>
                                </slot>
                            </div>
                        </div>
                        <div class="goods-counter">
                            <van-stepper
                                class="goods-selector"
                                v-model="goodsInfo.count"
                                v-if="showStepper"
                                :max="maxCount"
                                :min="minCount"
                                :disable-input="false"
                                @overlimit="overlimit"
                            />
                            <div class="goods-count" v-else>x{{ goodsInfo.count }}</div>
                        </div>
                    </div>
                    <div class="goods-tips" v-if="goodsTips" :style="{color: tipsColor}">
                        {{goodsTips}}
                    </div>
                </div>
            </div>
        </div>
        <goods-package
            :resource_id="goodsInfo.resource_id"
            :resource_type="goodsInfo.resource_type"
            :goodsCount="goodsInfo.goods_num"
            :discountAmount="discountAmount"
            v-if="goodsInfo.has_package && !invalid">
        </goods-package>
    </div>
</template>

<script>
import { Stepper } from "vant";
import { RESOURCE_TYPES_TKEYS } from "../../constants/constant";
import Price from '../Price'
import GoodsPackage from '../GoodsPackage'
import locale from '../../../../mixins/locale'
import { Image as XeImage } from '@xiaoe/vant';
import { replaceCDN } from "@xiaoe/js-tools/lib/replaceCDN";

export default {
    name: "GoodsCard",
    props: {
        goodsInfo: {
            type: Object,
            default: () => {}
        },
        goodsTagList: {
            type: Array,
            default: () => []
        },
        invalidReason: String,
        invalid: Boolean,
        goodsTitleTag: String,
        count: Number,
        goodsPrice: String,
        maxBuyCount: Number,
        minBuyCount: Number,
        historyBuyCount: Number,
        showStepper: Boolean,
        skuSelectable: Boolean,
        goodsTips: String,
        tipsColor: String,
        hasSvip:{
            type:Boolean,
            default:false
        }
    },
    mixins: [locale],
    components: {
        Price,
        GoodsPackage,
        [Stepper.name]: Stepper,
        XeImage
    },
    filters: {
        toPrice(value) {
            return `￥${((value || 0) / 100).toFixed(2)}`;
        },
    },
    computed: {
        reSelectSKU(){
            let reason = ['请重新选择商品规格', '超出限购数量', '未达到起售条件']
            return reason.indexOf(this.invalidReason) > -1
        },
        ratePrice() {
            return this.goodsPrice || this.goodsInfo.piece_price;
        },
        specification() {
            let attrValue = this.goodsInfo.sku_info.attr_value || [];
            return (
                    attrValue.map((spec) => {
                        return spec.attr_value;
                    })
                    .join(";")
            );
        },
        historyBuy(){
           return this.historyBuyCount || 0;
        },
        maxCount() {
            let count = this.maxBuyCount - ( this.historyBuy || 0 )
            count < 0 ? count = 0 : count
            if(this.maxBuyCount){
                return count < this.goodsInfo.stock ? count : this.goodsInfo.stock
            }else {
                return this.goodsInfo.stock
            }
        },
        minCount(){
            return this.minBuyCount || 1;
        },
        goodsTag() {
            return this.goodsInfo.goods_tag || this.t(RESOURCE_TYPES_TKEYS[this.baseInfo.spu_type]);
        },
        // 套餐优惠金额
        discountAmount() {
            return (this.goodsInfo.sub_goods_price / 100).toFixed(2)
        }
    },
    methods: {
        overlimit(limitType) {
            if(limitType === 'plus'){
                //限购
                if(this.goodsInfo.limit_purchase){
                    if ( this.maxCount === this.goodsInfo.count) {
                        if(this.goodsInfo.count === this.goodsInfo.stock || this.goodsInfo.count > this.goodsInfo.stock){
                            this.$toast('库存不足')
                            return
                        }
                        this.historyBuy ? this.$toast(`该商品限购${this.maxBuyCount}件哦，你已购买${this.historyBuy}件`) : this.$toast(`该商品限购${this.maxBuyCount}件哦`);
                    }
                    if (this.maxCount < this.goodsInfo.count) {
                        this.$toast(`该商品限购${this.maxBuyCount}件哦，你已购买${this.historyBuy}件`);
                    }
                }
            }
            if(limitType === 'minus'){
                //起售
                if(this.goodsInfo.sku_info?.sku_min_purchase){
                    if (this.minCount === this.goodsInfo.count) {
                        this.$toast(`该商品${this.minCount}件起售哦`);
                    }
                    if (this.minCount > this.goodsInfo.count) {
                        this.$toast(`该商品${this.minCount}件起售哦，你已购买${this.historyBuy}件`);
                    }
                }
            }
        },
        showSkuSelector() {
            this.$emit('showSkuCard', true)
        },
        handleCompressImg(url) {
            return replaceCDN(url, { width: 120 });
        }
    }
};
</script>

<style lang="scss" scoped>
.goods-info-wrapper {
    background: #fff;

    &.disabled {
        .goods-title {
            color: #CCC;
        }
    }
}

.goods-commerce {
    padding-bottom: 0.32rem;
}

.goods-wrapper {
    display: flex;
}

.goods-thumbnail {
    position: relative;
    flex: 0 0 1.8rem;
    height: 1.8rem;
    border-radius: 0.08rem;
    border: 1px solid #e5e5e5;
    overflow: hidden;

    .goods-type {
        position: absolute;
        right: 0.08rem;
        bottom: 0.08rem;
        text-size-adjust: none;
    }
    .svip{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 8;
        padding: .02rem .08rem;
        background: linear-gradient(315deg, #333333 0%, #525252 68%, #333333 100%);
        border-radius: 0.08rem 0px 0.08rem 0px;
        .svip-tag-text {
            font-size: .2rem;
            text-size-adjust: none;
            background: linear-gradient(90deg, #ffe4ad 0%, #ffc266 100%);
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    }
}
.svip-border{
    border: 1px solid #000000;
}

.tag {
    font-size: 0.2rem;
}

.goods-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .04rem 0;
    margin-left: 0.24rem;
    overflow: hidden;

    .goods-titles {
        display: flex;

        .goods-tag {
            margin-right: 0.04rem;
            white-space: nowrap;
        }

        .goods-title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;
            overflow-wrap: break-word;
        }
    }

    .goods-specification {
        margin-top: 0.12rem;
        color: #999;
        font-size: .24rem;
        word-break: break-all;
    }

    .goods-specification-selectable {
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        padding: .02rem .44rem .02rem .16rem;
        max-width: 100%;
        border-radius: .2rem;
        background: #F5F5F5;
        font-size: 0;

        .specifications {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            // max-width: calc(100% - .24rem);
            font-size: .24rem;
            vertical-align: bottom;
        }

        .icon-zhixiang {
            position: absolute;
            right: .16rem;
            top: .06rem;
            display: inline-block;
            transform: rotate(90deg) scale(.83);
        }
    }

    .goods-tags {
        margin-top: .18rem;
        .goods-tag {
            padding: 0.02rem 0.12rem;
            margin-right: 0.08rem;
            font-size: 0.2rem;
            color: #FF781F;
            border-radius: 0.16rem;
            text-align: center;
            background: #FFF3EB;
        }
    }

    .goods-quantity {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 0.18rem;
        width: 100%;
        font-size: .24rem;
        color: #999;

        .goods-pay-info {
            display: flex;
            flex-direction: column;
        }
        .goods-limit{
            margin-bottom: .16rem;
            .border-blue{
                border: #1472FF .02rem solid;
                color: rgba(20,114,255,1);
                padding: 0 .08rem;
                margin-right: .08rem;
                border-radius: 2px;
            }
            .border-orange{
                border: #FF781F .02rem solid;
                color: rgba(255,120,31,1);
                padding: 0 .08rem;
                border-radius: 2px;
            }
        }
    }
}
.invalid-area {
    font-size: .2rem;
    text-size-adjust: none;
    color: #FF781F;
}
.disabled-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-weight: 500;
}

.goods-tips,
.disabled-tips {
    font-size: .2rem;
    text-size-adjust: none;
}

.goods-tips {
    margin-top: .16rem;
}

.reselect-button {
    padding: .12rem .32rem;
    font-size: .24rem;
    line-height: 1;
    border-radius: 24rem;
    border: 1px solid #CCC;
}
</style>
